<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>发货中心</h3>
            </div>
            <div class="yuansdj">
              <div class="liebia">
                <el-tabs type="border-card">
                  <div class="hint">
                    <div>
                      <!-- <img src="" alt=""> -->
                      @
                      <span>零元入驻店铺违规累计满2次或10单会以全店下架：</span>
                    </div>
                    <p>1.请及时查看订单查询-即将延迟发货，如未在发货时限内上传真实的物流单号，订单会被判定为延迟发货；</p>
                    <p>2.请先揽件后导入，导入后24小时内无揽件信息会被判虚假发货；</p>
                  </div>
                  <div class="centreBox">
                    <div class="importData">
                      <div
                        class="pImport"
                        @click="checkedState=0"
                        :class="{on:checkedState==0}"
                      >批量导入</div>
                      <div
                        class="dImport"
                        @click="checkedState=1"
                        :class="{on:checkedState==1}"
                      >单条导入</div>
                    </div>
                    <div class="dataBox">
                      <div class="batch" v-show="checkedState==0">
                        <div class="content">
                          <img src="../../imges/bu13img/24xiaoshi.png" alt="24小时内可修改运单号" />
                          <p>24小时内可修改运单号</p>
                        </div>
                        <div class="content">
                          <!-- <img src="../../imges/bu13img/daoru.png" alt="批量修改直接覆盖导入" />
                          <p>批量修改直接覆盖导入</p>
                          <p style="margin-top:40px;color:blue">拖拽或点击以导入批量发货文件</p> -->
                          <el-upload
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          </el-upload>
                        </div>
                        <div class="content">
                          <img style="margin-top: 50px;" src="../../imges/bu13img/duoceng.png" alt="可一次性导入多家快递" />
                          <p>可一次性导入多家快递</p>
                          <p style="margin-top:40px;color:blue;text-align:right;">下载发货模板</p>
                        </div>
                      </div>
                      <div class="single" v-show="checkedState==1">
                        <div style="width:80%;margin:0 auto;">                     
                          <el-form :label-position="labelPosition" size="mini" label-width="80px" :model="formLabelAlign">
                            <el-form-item label="订单号">
                              <el-input v-model="formLabelAlign.name"></el-input>
                            </el-form-item>
                            <el-form-item label="快递单号">
                              <el-input v-model="formLabelAlign.region"></el-input>
                            </el-form-item>
                            <el-form-item label="活动区域" prop="region">
                              <el-select v-model="formLabelAlign.region" placeholder="请选择活动区域">
                                <el-option label="圆通" value="shanghai"></el-option>
                                <el-option label="顺丰" value="beijing"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="退货地址">
                              <el-input v-model="formLabelAlign.type"></el-input>
                            </el-form-item>
                          </el-form>
                          <el-button size="mini" style="margin:0 auto;display: block;" type="danger">确定导出</el-button>
                        </div>


                      </div>
                    </div>
                  </div>
                  <p><span style="font-size:18px;color:black">批量发货记录</span>(导入的单号24小时内可修改，仅为您展示可修改的导入记录) 共查询到0条数据</p>
                  <el-radio-group v-model="daoruStatus" size="small" style="margin:10px 0px">
                    <el-radio-button label="1">全部(0)</el-radio-button>
                    <el-radio-button label="2">导入成功(0)</el-radio-button>
                    <el-radio-button label="3">导入失败(0)</el-radio-button>
                  </el-radio-group>
                  <div class="dzlist">
                    <el-table :data="tableData" border :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}" style="width: 873px;margin:15px auto">
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column prop="order" label="订单号"></el-table-column>
                      <el-table-column prop="date" label="导入时间"></el-table-column>
                      <el-table-column prop="name" label="快递公司"></el-table-column>
                      <el-table-column prop="odd" label="导入状态"></el-table-column>
                      <el-table-column prop="status" label="备注"></el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                            修改快递单号
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="feny">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :total="1000"
                          style="margin-top: 5px;">
                        </el-pagination>
                        第<el-input size="mini" style="width: 50px;"></el-input>页
                        <button style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;">跳转</button>
                    </div> 
                </el-tabs>
              </div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      daoruStatus:"1",
      labelPosition: 'right',
      formLabelAlign: {
          name: '',
          region: '',
          type: ''
      },
      checkedState: 0, // 状态： 0选中状态  -1选中状态
      tableData: [
        {
          order:201425852321,
          date: "2016-05-02 16:23:16",
          name: "顺丰",
          odd: "20191911919191919119",
          status: "成功",
          remark: "多加辣椒"
        }
      ]
    };
  },
  methods: {
    // 点击切换导入类型
    switchover() {},

    deleteRow(){
      alert("修改快递单号")
    }
  }
};
</script>
<style scoped>
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  margin-top: 15px;
  padding-bottom: 10px;
}

.hint {
  width: 100%;
  height: 76px;
  font-weight: 500;
  background-color: #f9e1de;
  border: 2px solid #c0857d;
  padding: 8px;
  box-sizing: border-box;
}
.hint p {
  color: #000;
  text-indent: 1em;
}
.centreBox {
  width: 100%;
  height: 300px;
}
.importData {
  width: 235px;
  height: 25px;
  font-weight: 600;
  text-align: center;
  line-height: 25px;
  display: flex;
  justify-content: flex-start;
  margin-top: 47px;
  border: 1px solid #b8b5b8;
}
.importData .pImport {
  width: 117px;
  height: 100%;
  border-right: 1px solid #b8b5b8;
}
.importData .dImport {
  width: 117px;
  height: 100%;
}
/* 点击后的状态 */
.on {
  background-color: #f25f49;
}
.dataBox {
  width: 100%;
  height: 578px;
  /* background-color: red; */
  margin-top: 8px;
}
.batch {
  width: 100%;
  height: 217px;
  background-color: #f0edf1;
  display: flex;
  justify-content: space-around;
}
.single {
  width: 100%;
  height: 245px;
  background-color: #f0edf1;
}
.batch .content{
  width: 30%;
  text-align: center;
}
.batch .content img{
  margin-top: 45px;
  margin-bottom: 15px;
}
/* 修改上传图片区域大小 */
.content >>> .el-upload-dragger{
  width: 260px;
  background-color: #f0edf1;
  border: none;
}
.feny{
  display: flex;
  line-height: 40px;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
</style>